<template>
  <DraggableModal :visible="props.showModal" :title="`${props.title}设备`" :maskClosable="true" @ok="modalOkFn" @cancel="modalCancelFn">
    <Form ref="formRef" :model="state.data" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="设备编号" name="sn">
        <Input v-model:value="state.data.sn" />
      </a-form-item>

      <a-form-item label="设备名称" name="name">
        <Input v-model:value="state.data.name" />
      </a-form-item>

      <a-form-item label="所属系统" name="systemId">
        <Select v-model:value="state.data.systemId" :options="systemList" />
      </a-form-item>

      <a-form-item label="设备型号" name="model">
        <Input v-model:value="state.data.model" />
      </a-form-item>

      <a-form-item label="厂家" name="manufacturer">
        <Input v-model:value="state.data.manufacturer" />
      </a-form-item>

      <a-form-item label="设备信息" name="detailInfo">
        <a-textarea :disabled="props.title === '修改'" v-model:value="state.data.detailInfo" />
      </a-form-item>

      <a-form-item label="备注" name="desp">
        <a-textarea v-model:value="state.data.desp" />
      </a-form-item>
    </Form>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import { message, Form, Input, Select } from 'ant-design-vue';
import { reactive, ref, watch } from 'vue';
import { postThirdDevice, putThirdDevice } from '@/modules/system-docking/api/tripartite-equipment';
import { systemList } from '../columns';

/**
 * const
 */
const props = withDefaults(
  defineProps<{
    showModal: boolean;
    data: any;
    title: string;
  }>(),
  {
    showModal: false,
  },
);
watch(
  () => props.showModal,
  () => {
    if (props.showModal) {
      state.data = props.data;
      if (props.data.detailInfo && props.data.detailInfo.length > 20000) {
        state.data.detailInfo = props.data.detailInfo.substring(0, 20000) + '数据量过大后面的数据省略';
      }
    }
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
  (e: 'editModalOk'): void;
}>();
const formRef = ref();

/**
 * data
 */
const state: {
  data: any;
} = reactive({
  data: {},
});
const rules = {
  sn: [{ required: true, message: '数据必填!' }],
  name: [{ required: true, message: '数据必填!' }],
  systemId: [{ required: true, message: '数据必填!' }],
  model: [{ required: true, message: '数据必填!' }],
  manufacturer: [{ required: true, message: '数据必填!' }],
};

/**
 * fn
 */
const modalOkFn = async () => {
  try {
    await formRef.value?.validateFields();
  } catch {
    return;
  }
  let params: any = {
    sn: state.data.sn,
    name: state.data.name,
    systemId: state.data.systemId,
    model: state.data.model,
    manufacturer: state.data.manufacturer,
    detailInfo: state.data.detailInfo,
    desp: state.data.desp,
  };
  if (props.title === '新增') {
    await postThirdDevice(params);
  } else {
    params.id = state.data.id;
    await putThirdDevice(params);
  }
  message.success('操作成功！');
  emits('editModalOk');
  modalCancelFn();
};
const modalCancelFn = () => {
  formRef.value?.clearValidate();
  state.data = {};
  emits('update:showModal', false);
};
</script>

<style scoped></style>
